<template>
  <div class="flex items-center justify-between table-toolbar overflow-hidden">
    <slot name="bar-left">
      <p class="mb-0 font-bold ft-16">{{ title || route.meta.title }}</p>
      <p><a href=""></a></p>
    </slot>
    <div class="flex-shrink-0">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from 'vue-router'

interface Props {
  title?: any
  isitem?: any
}

const route = useRoute()

withDefaults(defineProps<Props>(), {
  title: '',
  isitem: null
})
</script>

<script lang="ts">
export default {
  name: 'TableToolbar'
}
</script>

<style lang="scss" scoped>
.table-toolbar {
  margin-top: -20px;
  height: 64px;
  padding: 20px 0;
  width: 100%;
}
</style>
